<template>
  <el-card shadow="never">
    <template #header>
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Plus" @click="handleAdd()"> 新增 </el-button>
        </el-col>
      </el-row>
    </template>
    <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="stageId" label="场景ID" width="180" />
      <el-table-column prop="stageName" label="场景名称" />
      <el-table-column label="操作" width="300">
        <template #default="scope">
          <div style="display: flex;" class="coloes">
            <div @click="editNameClick(scope.row)" style="flex: 1;">修改</div>
            <div @click="editClick(scope.row)" style="flex: 1;">编辑画面</div>
            <div @click="monitorClick(scope.row)" style="flex: 1;">实时画面</div>
            <!-- <div style="flex: 1;">删除</div> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- end 修改名称 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500">
    <el-input v-model="nameData.stageName" style="width: 240px" placeholder="请输入场景名称" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="buClick"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { gettableauList,editlistlist, addStage } from '../api/tableau.api'
import { useRouter } from 'vue-router'
const router = useRouter()

const dialogVisible = ref(false)
const tableData = ref([])
const dialogTitle = ref('')
const dialogTyp = ref('')
const nameData = ref({
  stageName: null
})


const init = () => {
    gettableauList({unit:true}).then((res) => {
        tableData.value = res.data
    })
}

init()
const handleSelectionChange = (e) => {
    console.log(e)
}
/** 新增按钮操作 */
const handleAdd = (row) => {
  dialogTitle.value = '新增场景名称'
  dialogVisible.value = true
  dialogTyp.value = 'add'
}
const editClick = (e) => {
    console.log(e.stageId)
    router.push('/tableau/tableauedit?stageId=' + e.stageId)
}
const monitorClick = (e) => {
    router.push('/tableau/tableaumonitor?stageId=' + e.stageId)
}

const editNameClick = (e) => {
    nameData.value = JSON.parse(JSON.stringify(e))
    dialogTitle.value = '修改场景名称'
    // nameData.value.unit = true
    dialogVisible.value = true
    dialogTyp.value = 'edit'
}

const buClick = async ()=>{
  dialogVisible.value = false

  const value = nameData.value
  if(dialogTyp.value == 'edit'){
    await editlistlist(value)
    nameData.value = ''
  }else{
    console.log('stageName:',value.stageName)
    await addStage({stageName: value.stageName})
  }
  init()

}
</script>

<style scoped>
.coloes {
    color: #1890ff;
}
</style>
